<template>
    <div class="column-header" style="display:flex;justify-content: center;align-items:center;">
        <span class="title">{{ label }}</span>
        <el-popover placement="bottom" trigger="click" ref="tableHeadPopover" @show="funnelPopShowEvent" :popper-style="{minWidth:'88px',padding:'10px',width:'auto'}" class="popover">
            <template #reference>
                <Icon v-if="!bindData" icon="streamline-color:filter-2-flat" inline width="16" height="16" class="icon"></Icon>
                <Icon v-else icon="streamline-color:filter-2" inline width="16" height="16" class="icon"></Icon>
            </template>
            <div class="popover-content">
                <div class="popover-content-head">
                    <!-- 下拉选择 -->
                    <template v-if="type === 'select'">
                        <el-select v-model="filterValueTemp" size="small" :placeholder="'请选择' + label" :teleported="false" filterable>
                            <el-option v-for="item,index in alternativeOption" :label="item" :value="item" :key="index"></el-option>
                        </el-select>
                    </template>
                    <!-- input输入框 -->
                    <template v-if="type === 'input'">
                        <el-input v-model="filterValueTemp" size="small" :placeholder="'请输入' + label"></el-input>
                    </template>
                    <!-- 日期选择 -->
                    <template v-if="type === 'date'">
                        <el-date-picker v-model="filterValueTemp" type="date" size="small" value-format="yyyy-MM-dd" :editable="false" placeholder="选择日期" :teleported="false" style="width:120px;"></el-date-picker>
                    </template>
                    <!-- 日期范围选择 -->
                    <template v-if="type === 'dateRange'">
                        <el-date-picker v-model="filterValueTemp" type="datetimerange" start-placeholder="Start date" end-placeholder="End date"  format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" :teleported="false" style="width:200px;"></el-date-picker>
                    </template>
                    <!-- 单选框组 -->
                    <template v-if="type === 'radio'">
                        <el-radio v-model="filterValueTemp" v-for="option,i in alternativeOption" :key="i" :label="i"  >{{ option }}</el-radio>
                    </template>
                </div>
                <div class="popover-content-options" style="text-align:right;margin-top:20px;">
                    <el-button size="small" @click="tableHeadClearBtn">清空</el-button>
                    <el-button type="primary" size="small" @click="tableHeadConfirmBtn">确定</el-button>
                </div>
            </div>
        </el-popover>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { ElPopover, ElSelect,ElOption, ElInput, ElDatePicker, ElRadio, ElButton } from 'element-plus';
import { Plus, Download } from '@element-plus/icons-vue';
import { FilterIcon1,FilterIcon2 } from '@vben/icons';
import { Icon } from '@iconify/vue';

const props = defineProps({
    label:{
        type:String,  //显示列名称
        default:"label",
        require:false
    },
    type:{
        type:String, //类型: select | date | input ...
        default:'input',
        require:false
    },
    bindData:{
        type:[String,Number],  //父组件的搜索值
        default:'',
        require:false
    },
    alternativeOption:{
        type:Array,  //当筛选为select | radio 时,其渲染的备选项数组alternativeOption
        default:() => new Array(),
        require:false
    },
    filterField:{
        type:String,  //对应筛选的搜索的key,应与父组件搜索过滤bindData的key保持一致
        default:'',
        require:false
    }
});

const emit = defineEmits(['change']);


const tableHeadPopover = ref(null);
let filterValueTemp:any = ref("");

const funnelPopShowEvent = () => {
    filterValueTemp.value = props.bindData;
}
const tableHeadClearBtn = () => {
    filterValueTemp.value = "";
    const parameters = {
        state:"clear",
        filterField:props.filterField,
        selectedValue:filterValueTemp.value
    }
    emit("change",parameters);
    closePopover();
}
const tableHeadConfirmBtn = () => {
    const parameters = {
        state:"confirm",
        filterField:props.filterField,
        selectedValue:filterValueTemp.value
    }
    emit("change",parameters);
    closePopover();
}
function closePopover () {
    tableHeadPopover.value.hide();
}

/************************************************************
//筛选的change事件[在父组件中配合使用]
const filterChangeEvent = (parameter) => {
  const { state, filterField, selectedValue } = parameter;
  //clear action
  if (state === 'clear') {
    if (formData.value[filterField] !== '') {
      formData.value[filterField] = '';
      //** search event
    }
  }

  //confirm action
  if (state === 'confirm') {
    formData.value[filterField] = selectedValue;
    if (selectedValue !== '') {
      //** search event
    }
  }
}
************************************************************/
</script>

<style lang="scss" scoped>
.icon{
    cursor: pointer;
    margin-left: 2px;
    outline: none;
    border: none;
}
.icon:focus {
  outline: none;
  border: none;
}
</style>